// show_modal/index.js
export class show_model {
	constructor(option = {}) {
		this.bodyModel = null;
		this.cancelModel = null;
		this.confirmModel = null;
		let userinfo = option.userinfo || {}
		let opacity = option.opacity || 0.4;
		let clickEvent = option.IsclickEvent || false;
		let cancelVal = option.cancelVal || '取消';
		let confirmVal = option.confirmVal || '确认';
		let cancelColor = option.cancelColor || '#fff'; // 取消
		let confirmColor = option.confirmColor || '#fff'; // 确认
		let delCancel = option.delCancel || false;
		let align = option.align || "center";
		let top = option.top || 0
		let btnTop = option.btnTop || 0
		let fn = () => {};
		this.$event = option.$event || fn;
		let backOff = option.backOff || false;
		//#ifdef APP-PLUS

		this.creatView(opacity, clickEvent, {
			cancelVal,
			confirmVal,
			confirmColor,
			cancelColor,
			delCancel,
			align,
			userinfo,
			top,
			btnTop
		})
		if (!backOff) {
			this.backbtn();
		}
		//#endif
	}
	backbtn() {
		let that = this;
		plus.key.addEventListener('backbutton', function(e) {
			that.hide();
		}, false)
	}
	//生成提示框view
	creatView(opa, clickEvent, modelInfo) {
		let userinfo = modelInfo.userinfo
		let style = {
			left: 0,
			top: modelInfo.top,//88
			width: '100%',
			height: 80,
		}
		let platform = plus.os.name.toLowerCase();
		let view = new plus.nativeObj.View('showModalView', style);
		view.draw([{
				tag: 'rect',
				id: 'content',
				rectStyles: {
					radius: '12px',
					color: `rgba(39, 40, 34, 0.9)`
				},
				position: {
					width: '100%',
					height: '100%',
					top: 0,
					left: 0,
				},
			},
			{
				tag: 'img',
				id: 'img',
				src: userinfo.receiveImg || '/static/img/yy.jpg',
				sprite: {
					radius: '50%'
				},
				position: {
					width: 40,
					height: 40,
					top: 20,
					left: 20,
				}
			},
			{
				tag: 'font',
				id: 'name',
				text: userinfo.receiveName,
				textStyles: {
					size: 12,
					color: '#fff'
				},
				position: {
					width: 100,
					height: 40,
					top: 15,
					left: 42,
				}
			},
			{
				tag: 'font',
				id: 'text',
				text: modelInfo.content,
				textStyles: {
					size: 12,
					color: '#fff'
				},
				position: {
					width: 100,
					height: 40,
					top: 30,
					left: 60,
				}
			}
		])

		if (!modelInfo.delCancel) {
			// 取消	
			let viewCancel = new plus.nativeObj.View('cancel', {
				width: 40,
				height: 40,
				left: '70%',
				top: modelInfo.btnTop//108
			})
			viewCancel.draw([{
					tag: 'rect',
					id: 'cancel2',
					rectStyles: {
						radius: '50%',
						color: modelInfo.cancelColor,
					},
					position: {
						top: 0,
						left: 0
					}
				},
				{
					tag: 'font',
					id: 'cancel',
					text: modelInfo.cancelVal,
					textStyles: {
						color: '#fff',
						size: '12px',
					},
					position: {
						top: 0,
						left: 0,
					}
				},

			]);
			viewCancel.addEventListener("click", (e) => {
				this.$event({
					res: false,
					types: 'cancel'
				});
				this.hide();
			}, false);
			this.cancelModel = viewCancel;
		}
		// 确认
		let viewconfirm = new plus.nativeObj.View('confirm', {
			width: 40,
			height: 40,
			top: modelInfo.btnTop,//108
			left: '85%'
		});
		viewconfirm.draw([{
				tag: 'rect',
				id: 'confirm2',
				rectStyles: {
					radius: '50%',
					color: modelInfo.confirmColor,
				},
				position: {
					top: 0,
					left: 0
				}
			},
			{
				tag: 'font',
				id: 'confirm',
				text: modelInfo.confirmVal,
				textStyles: {
					color: '#fff',
					size: '12px',
				},
				position: {
					top: 0,
					left: 0
				}
			}
		])

		viewconfirm.addEventListener("click", (e) => {
			this.$event({
				res: true,
				types: 'confirm'
			});
			// this.hide();
		}, false);
		this.bodyModel = view;
		this.confirmModel = viewconfirm;
	}
	showModalAnimationClose() {
		var options = {
			type: 'pop-out',
			duration: 300
		};
		plus.nativeObj.View.startAnimation(options, {
			view: this.bodyModel
		}, {
			view: this.cancelModel
		}, {
			view: this.viewconfirm
		}, function() {
			console.log('plus.nativeObj.View.startAnimation动画结束');
			// 关闭原生动画
			plus.nativeObj.View.clearAnimation();
		});
	}
	showModalAnimationOpen() {
		var options = {
			type: 'pop-in',
			duration: 1000
		};

		plus.nativeObj.View.startAnimation(options, {
			view: this.bodyModel
		}, {
			view: this.cancelModel
		}, {
			view: this.viewconfirm
		}, function() {
			console.log('plus.nativeObj.View.startAnimation动画结束');
			// 关闭原生动画
			plus.nativeObj.View.clearAnimation();
		});
	}
	show() {
		this.showModalAnimationOpen();
		this.bodyModel.show();
		if (this.cancelModel) {
			this.cancelModel.show();
		}
		this.confirmModel.show();

	}
	hide() {
		this.showModalAnimationClose();
		this.bodyModel.hide();
		if (this.cancelModel) {
			this.cancelModel.hide();
		}
		this.confirmModel.hide()
		uni.$showModalshow = null
	}
}

export default show_model